import React, { Component } from "react";

class header extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inp: [
        "圆周运动",
        "导数及其应用",
        "英语定语从句",
        "化学反应速率和化学平衡",
        "农业区域因",
      ],
    };
  }
  render() {
    const { inp } = this.state;
    return (
      <React.Fragment>
        <header className="header">
          <div className="header_top">
            <div className="htop_text m">
              <div className="htop_tselect">
                <i className="icon_fix"></i>
                <span>北京</span>
                <i className="icon_down"></i>
              </div>
              <ul className="htop_tul">
                <li className="tul_login">
                  <a href="###">Hi,请登录</a>
                </li>
                <li className="tul_logon">
                  <a href="###">免费注册</a>
                </li>
                <li className="tul_line">
                  <a href="###">全国名师</a>
                </li>
                <li className="tul_line">
                  <a href="###">精品微课</a>
                </li>
                <li className="tul_line">
                  <a href="###">名师大全</a>
                </li>
                <li className="tul_line">
                  <a href="###">试卷大全</a>
                </li>
                <li>
                  <a href="###">试题大全</a>
                </li>
              </ul>
            </div>
          </div>
          <div className="header_center m">
            <img
              src={require("../../images/logo.jpg").default}
              className="logo"
            />
            <div className="hcent_right">
              <div className="hcright_inp">
                <div className="hinp_inp">
                  <div className="hinp_select">微课</div>
                  <input
                    type="text"
                    placeholder="找名师、查名校、搜科目
                  "
                  />
                  <i></i>
                </div>
                <p>
                  {inp.map((val, index) => {
                    return <span key={index}>{val}</span>;
                  })}
                </p>
              </div>
              <button>
                <i></i>
                我的订阅
              </button>
            </div>
          </div>
          <div className="header_bto">
            <ul className="hbto_nav m clearfix">
              <li className="hnav_home">
                <a href="###">首页</a>
              </li>
              <li className="hnav_new">
                <a href="###">精品微课</a>
              </li>
              <li className="hnav_new">
                <a href="###">名校名师</a>
              </li>
              <li>
                <a href="###">名师入驻</a>
              </li>
              <li>
                <a href="###">产品中心</a>
              </li>
            </ul>
          </div>
        </header>
      </React.Fragment>
    );
  }
}

export default header;
